{% extends "base.html" %}
{% from "_icones.html" import icone %}
{% block titulo %}Primeiros passos{% endblock %}
{% block conteudo %}
<div class="topo">
  <div><h1>Bem-vindo ao {{ PRODUTO }}</h1>
    <p>Cinco passos para deixar a empresa pronta para emitir. Dá para mudar tudo depois em Configurações.</p></div>
  <div class="acoes"><form method="post" action="{{ url_for('bem_vindo_pular') }}"><button class="btn">Pular por agora</button></form></div>
</div>

<ol class="assist-etapas" id="etapas">
  <li class="ativa" data-p="1">Empresa</li><li data-p="2">Regime tributário</li><li data-p="3">O que a empresa usa</li>
  <li data-p="4">Numeração e contador</li><li data-p="5">Certificado digital</li>
</ol>

<form method="post" id="form-assist" enctype="multipart/form-data" data-carregando="Salvando...">
<div class="cartao assist-passo" data-p="1">
  <div class="cab"><h2>{{ icone('clientes') }} Dados da empresa</h2></div>
  <div class="corpo"><div class="campos">
    <div class="c4"><label>CNPJ</label>
      <div class="com-botao"><input name="cnpj" value="{{ cfg.cnpj|doc if cfg.cnpj else '' }}" required inputmode="numeric">
      <button class="btn" type="button" onclick="consultarEmpresa()">{{ icone('busca') }} Buscar</button></div></div>
    <div class="c8"><label>Razão social</label><input name="razao_social" value="{{ cfg.razao_social or '' }}" maxlength="60" required></div>
    <input type="hidden" name="nome"><input type="hidden" name="fantasia">
    <div class="c6"><label>Nome fantasia <span class="opc">(opcional)</span></label><input name="nome_fantasia" value="{{ cfg.nome_fantasia or '' }}"></div>
    <div class="c3"><label>Inscrição estadual</label><input name="ie" value="{{ cfg.ie or '' }}" required></div>
    <div class="c3"><label>Telefone / WhatsApp</label><input name="fone" value="{{ cfg.fone or '' }}" required inputmode="tel"></div>
    <div class="c3"><label>CEP</label><input name="cep" value="{{ cfg.cep or '' }}" onblur="buscarCEP(this.form)" required></div>
    <div class="c7"><label>Logradouro</label><input name="logradouro" value="{{ cfg.logradouro or '' }}" maxlength="60" required></div>
    <div class="c2"><label>Número</label><input name="numero" value="{{ cfg.numero or '' }}"></div>
    <div class="c4"><label>Complemento</label><input name="complemento" value="{{ cfg.complemento or '' }}"></div>
    <div class="c4"><label>Bairro</label><input name="bairro" value="{{ cfg.bairro or '' }}"></div>
    <div class="c2"><label>UF</label><select name="uf">{% for uf in UFS %}<option {{ 'selected' if (cfg.uf or 'BA') == uf }}>{{ uf }}</option>{% endfor %}</select></div>
    <div class="c2 meio"><label>Município</label><input name="municipio" value="{{ cfg.municipio or '' }}" required></div>
    <div class="c6"><label>E-mail da empresa</label><input name="email" type="email" value="{{ cfg.email or '' }}" required></div>
    <div class="c6"><label>Seu nome (responsável)</label><input name="responsavel" value="{{ cfg.teste_responsavel or (USUARIO.nome if USUARIO else '') }}" maxlength="80" required></div>
    <div class="c12 ajuda">Ao concluir, o programa ativa pela internet o teste grátis de {{ PRODUTO_DIAS_TESTE }} dias para este CNPJ.
      O telefone e o e-mail ficam com a {{ PRODUTO_EMPRESA }} para o suporte falar com você durante o teste.</div>
    <div class="c12 ajuda" id="achado"></div>
  </div></div>
</div>

<div class="cartao assist-passo" data-p="2" hidden>
  <div class="cab"><h2>{{ icone('selo') }} Regime tributário</h2></div>
  <div class="corpo"><div class="campos">
    <div class="c12 ajuda">O regime decide como o ICMS (CST ou CSOSN), o PIS/COFINS e o IBS/CBS saem na nota. Na dúvida, pergunte ao contador.</div>
    {% for k, r in REGIMES.items() %}
    <label class="c6 assist-opcao"><input type="radio" name="regime" value="{{ k }}" {{ 'checked' if (cfg.regime or 'simples') == k }}>
      <span><b>{{ r.nome }}</b><span class="peq suave">CRT {{ r.crt }} ·
        {% if r.csosn %}ICMS por CSOSN{% else %}ICMS por CST{% endif %} ·
        {% if r.pis_cofins_simples %}PIS/COFINS no DAS{% else %}PIS {{ r.aliq_pis|replace('.', ',') }}% / COFINS {{ r.aliq_cofins|replace('.', ',') }}%{% endif %}</span></span></label>
    {% endfor %}
    <div class="c6 so-csosn"><label>CSOSN mais usado nos seus produtos</label><select name="csosn_padrao">
      {% for k, v in CSOSN.items() %}<option value="{{ k }}" {{ 'selected' if (cfg.csosn_padrao or '102') == k }}>{{ v }}</option>{% endfor %}</select></div>
    <div class="c3 meio so-csosn"><label>Crédito de ICMS (%) <span class="opc">CSOSN 101</span></label><input name="aliq_credito_sn" value="{{ cfg.aliq_credito_sn or '' }}"></div>
    <div class="c3 meio so-normal"><label>ICMS interno (%)</label><input name="aliq_icms" value="{{ cfg.aliq_icms or '' }}" placeholder="ex.: 20,5"></div>
  </div></div>
</div>

<div class="cartao assist-passo" data-p="3" hidden>
  <div class="cab"><h2>{{ icone('caixa') }} O que a empresa vai usar</h2></div>
  <div class="corpo"><div class="campos">
    <div class="c12 ajuda">Os módulos desligados ficam escondidos. Você liga ou desliga quando quiser, sem perder dados.</div>
    {% for k, m in LISTA_MODULOS.items() %}
    <label class="c6 assist-opcao"><input type="checkbox" name="mod_{{ k }}" value="1" {{ 'checked' if MODULOS[k] }}>
      <span><b>{{ m.nome }}</b><span class="peq suave">{{ m.descricao }}</span></span></label>{% endfor %}
  </div></div>
</div>

<div class="cartao assist-passo" data-p="4" hidden>
  <div class="cab"><h2>{{ icone('nota') }} Numeração e contador</h2></div>
  <div class="corpo"><div class="campos">
    <div class="c3 meio"><label>Série</label><input name="serie" value="{{ cfg.serie or '1' }}" inputmode="numeric"></div>
    <div class="c4 meio"><label>Próximo número em produção</label><input name="proximo_numero" value="{{ cfg.proximo_numero or '1' }}" inputmode="numeric"></div>
    <div class="c5 ajuda" style="align-self:end">Se a empresa já emitia NF-e em outro sistema, use a mesma série e o número seguinte ao último emitido.</div>
    <div class="secao-titulo">Escritório de contabilidade <span class="opc" style="text-transform:none;font-weight:400;letter-spacing:0">(recebe acesso ao XML das notas)</span></div>
    <div class="c4"><label>CPF/CNPJ</label><input name="contador_doc" value="{{ cfg.contador_doc|doc if cfg.contador_doc else '' }}"></div>
    <div class="c4"><label>Nome</label><input name="contador_nome" value="{{ cfg.contador_nome or '' }}"></div>
    <div class="c4"><label>E-mail</label><input name="contador_email" value="{{ cfg.contador_email or '' }}"></div>
  </div></div>
</div>

<div class="cartao assist-passo" data-p="5" hidden>
  <div class="cab"><h2>{{ icone('chave') }} Certificado digital A1</h2>
    {% if cfg.cert_arquivo %}<span class="selo ok">Já instalado</span>{% endif %}</div>
  <div class="corpo"><div class="campos">
    <div class="c8"><label>Arquivo do certificado (.pfx ou .p12) <span class="opc">(opcional agora)</span></label><input type="file" name="certificado" accept=".pfx,.p12"></div>
    <div class="c4"><label>Senha do certificado</label><input type="password" name="senha" autocomplete="off"></div>
    <div class="c12 ajuda">Sem o certificado você já pode cadastrar produtos e clientes. Para emitir, instale-o depois em Configurações.
      O sistema começa no ambiente de <b>homologação</b> (testes, sem valor fiscal); troque para produção quando estiver tudo conferido.</div>
  </div></div>
</div>

<div class="rodape-form">
  <button type="button" class="btn" id="voltar" hidden>Voltar</button>
  <button type="button" class="btn prim" id="avancar">Continuar</button>
  <button class="btn prim" id="concluir" hidden>Concluir</button>
</div>
</form>
{% endblock %}
{% block scripts %}
<script>
const fa = $('#form-assist');
ligarUfMunicipio(fa.uf, fa.municipio, 'lista-mun-assist');
fa.nome.addEventListener('change', () => { if (fa.nome.value) fa.razao_social.value = fa.nome.value; });
fa.fantasia.addEventListener('change', () => { if (fa.fantasia.value) fa.nome_fantasia.value = fa.fantasia.value; });
const REGIMES_JS = {{ REGIMES|tojson }};
let passo = 1;
function mostrar() {
  document.querySelectorAll('.assist-passo').forEach((el) => { el.hidden = Number(el.dataset.p) !== passo; });
  document.querySelectorAll('#etapas li').forEach((el) => {
    const p = Number(el.dataset.p);
    el.classList.toggle('ativa', p === passo); el.classList.toggle('feita', p < passo);
  });
  $('#voltar').hidden = passo === 1; $('#avancar').hidden = passo === 5; $('#concluir').hidden = passo !== 5;
  window.scrollTo(0, 0);
}
function regimeMudou() {
  const r = REGIMES_JS[(fa.querySelector('[name=regime]:checked') || {}).value] || {};
  document.querySelectorAll('.so-csosn').forEach((el) => { el.hidden = !r.csosn; });
  document.querySelectorAll('.so-normal').forEach((el) => { el.hidden = !!r.csosn; });
}
fa.querySelectorAll('[name=regime]').forEach((el) => el.addEventListener('change', regimeMudou));
regimeMudou();
$('#avancar').addEventListener('click', () => {
  const atual = document.querySelector(`.assist-passo[data-p="${passo}"]`);
  const invalido = [...atual.querySelectorAll('input,select')].find((el) => !el.checkValidity());
  if (invalido) { invalido.reportValidity(); return; }
  passo = Math.min(5, passo + 1); mostrar();
});
$('#voltar').addEventListener('click', () => { passo = Math.max(1, passo - 1); mostrar(); });
async function consultarEmpresa() {
  const j = await buscarCNPJ(fa, 'cnpj');
  if (!j) return;
  {
    const msgs = [];
    if (j.regime_sugerido) {
      const r = fa.querySelector(`[name=regime][value="${j.regime_sugerido}"]`);
      if (r) { r.checked = true; regimeMudou(); }
      msgs.push(`Pela Receita, a empresa é <b>${REGIMES_JS[j.regime_sugerido].nome}</b> (já marquei no passo 2).`);
    } else if (j.simples_informado) {
      const r = fa.querySelector('[name=regime][value="presumido"]');
      if (r) { r.checked = true; regimeMudou(); }
      msgs.push('Pela Receita, a empresa <b>não</b> é do Simples: escolha Lucro Presumido ou Lucro Real no passo 2.');
    }
    if (j.cooperativa) { fa.mod_cooperativa.checked = true; msgs.push('É uma <b>cooperativa</b>: liguei o módulo Cooperativa no passo 3.'); }
    $('#achado').innerHTML = msgs.join(' ');
  }
}
</script>
{% endblock %}